<template>
	<view>
		<cu-custom :isBack="true" bgColor="bg-white solids-bottom">
			<block slot="content">
				发评论
			</block>
			<block slot="right">
				<text @tap="comment">发布</text>
			</block>
		</cu-custom>
		<view class="warp30"></view>
		<view class="cu-form-group">
			<textarea maxlength="300" :disabled="modalName!=null" @input="textareaAInput" placeholder="写评论" :auto-height="true" :adjust-position="false" 
			style="min-height:101.4upx;max-height: 174upx;"></textarea>
		</view>
		<view class="cu-avatar-url">
			<view class="uni-flex padding-sm">
				<image class="cu-avatar-url-img" src="/static/top.jpg"></image>
				<view class="cu-avatar-url-main margin-left-sm">
					<text class="title">出售住宅 普通住宅 吉大 华发又一城</text>
					<text class="more">250万 4室2厅 150平米 19楼</text>
				</view>
			</view>
		</view>
		<view class="cu-form-group">
			<view class="grid col-3 grid-square flex-sub">
				<view class="padding-xs bg-img" v-for="(item,index) in imgList"
				 :key="index" @tap="ViewImage" :data-url="imgList[index]">
					<image :src="imgList[index]" mode="aspectFill"></image>
					<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
						<text class='cuIcon-close'></text>
					</view>
				</view>
				<view class="padding-xs solids" @tap="ChooseImage" v-if="imgList.length<9">
					<text class='cuIcon-add'></text>
				</view>
			</view>
		</view>
		
		<view class="cu-tabbar-height"></view>
		<view class="cu-bar tabbar bg-gray foot">
			<view>
				<view class="text-darkGray margin-left" @tap="Check">
					<text :class="['icon-check'+check]"></text>
					<text>同时评论</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgList: [],
				radio: 'A',
				modalName: null,
				check:"",
			};
		},
		methods: {
			comment() {
				console.info("发布");
			},
			Check(){
				if(this.check=="on")
				this.check="";
				else
				this.check="on"
			},
			ChooseImage() {
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					success: (res) => {
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths)
						} else {
							this.imgList = res.tempFilePaths
						}
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				this.imgList.splice(e.currentTarget.dataset.index, 1)
			},
			textareaAInput(e) {
				this.textareaAValue = e.detail.value
			},
			textareaBInput(e) {
				this.textareaBValue = e.detail.value
			}
		}
	}
</script>

<style lang="less">
.cu-form-group+.cu-form-group{
	border: 0;
}
.icon-check,.icon-checkon{
	vertical-align: middle;
	&:after{
		font-size: 40upx;
		font-family: iconfont;
		background: #fff;
		color: #e1e1e1;
		margin-right: 10upx;
		content: '\e669';
		display: inline-block;
		line-height: 1;
	}
}
.icon-checkon{
	&:after{
		content: '\e798';
		color: #ff4a4a;
	}
}
.cu-avatar-url{
	padding: 30upx;
	.padding-sm{
		background: #f2f2f2;
		.cu-avatar-url-img{
			width: 120upx;
			height: 90upx;
		}
		.cu-avatar-url-main{
			flex: 1;
			.title{
				color: #666666;
				font-size: 28upx;
				line-height: 50upx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
			.more{
				color: #666666;
				font-size: 24upx;
				line-height: 40upx;
			}
		}
	}
}

.bg-img{
	position: relative;
	image{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
}
</style>
